<template>
  <div class="user-center">
    <el-card style="width: 50%; height: 80%; margin: 30px auto;
    background-image: url('@/assets/img/background.png'); background-size: cover;">
      <div style="text-align: right; margin-bottom: 20px">
        <el-button type="primary" @click="updatePassword">修改密码</el-button>
      </div>
      <el-form :model="student" label-width="50px" style="padding-right: 50px; width: 100%">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="student.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="contact">
          <el-input v-model="student.contact" placeholder="电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="student.email" placeholder="邮箱"></el-input>
        </el-form-item>
        <div style="text-align: center; margin-bottom: 30px">
          <el-button type="primary" @click="update">保 存</el-button>
        </div>
      </el-form>
    </el-card>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" destroy-on-close>
      <el-form :model="student" label-width="80px" style="padding-right: 20px; width: 100%" :rules="rules" ref="formRef">
        <el-form-item label="原始密码" prop="password">
          <el-input show-password v-model="student.password" placeholder="原始密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input show-password v-model="student.newPassword" placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input show-password v-model="student.confirmPassword" placeholder="确认密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        id: null, // 假设ID是从其他地方获取的
        name: '',
        contact: '',
        email: '',
        password: '',
        newPassword: '',
        confirmPassword: ''
      },
      dialogVisible: false,
      rules: {
        password: [{ required: true, message: '请输入原始密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '请确认密码', trigger: 'blur' }, { validator: this.validatePassword, trigger: 'blur' }]
      }
    };
  },
  methods: {
    loadPerson() {
      this.$request.get('/student/selectById/' + this.student.id).then(res => {
        if (res.code === '200') {
          this.student = res.data;
          // 更新浏览器缓存里的学生信息
          localStorage.setItem('xm-student', JSON.stringify(this.student));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    updatePassword() {
      this.dialogVisible = true;
    },
    update() {
      this.$request.put('/student/update', this.student).then(res => {
        if (res.code === '200') {
          // 成功更新
          this.$message.success('保存成功');
          // 更新浏览器缓存里的用户信息
          localStorage.setItem('xm-student', JSON.stringify(this.student));
          // 触发父组件的数据更新
          this.$emit('update:student');
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    validatePassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请确认密码'));
      } else if (value !== this.student.newPassword) {
        callback(new Error('确认密码错误'));
      } else {
        callback();
      }
    },
    save() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$request.put('/student/update/Password', this.student).then(res => {
            if (res.code === '200') {
              // 成功更新
              this.$message.success('修改密码成功');
              this.$router.push('/login');
            } else {
              this.$message.error(res.msg);
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.el-form-item {
  font-weight: bold;
}
</style>
